<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts/echarts.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<style>
    div {
        margin-bottom: 10px;
        font-size: 20px;
    }

    #tab_1 {
        text-align: center;
        width: 100%;
        height: 160px;
        border: #D3DEAE;
    }

    #tab_2 {
        text-align: center;
        width: 100%;
        height: 100px;
        border: #D3DEAE;
    }

    #tab_3 {
        height: 33px;
        line-height: 33px;
        border: 2px solid #D3DEAE;
    }

    .bac {
        background: #E7E7E7;
    }

    #main {
        margin: auto;
    }

</style>
<body>
<script>
    window.onload = function () {
        showTabOne()
        setTimeout("showTabTwo()", 100);
    }
</script>
<div>
    <table border="1" align="center" cellpadding="0" cellspacing="0" id="tab_1">
        <tr>
            <td colspan="3" style="text-align: left" class="bac">资产详情</td>
        </tr>
        <tr>
            <td>数量</td>
            <td>价值(万元)</td>
            <td>类型</td>
        </tr>

        <tbody id="tb1">

        </tbody>
        <tr>
            <td colspan="3" style="text-align: left" id="totalReserve"></td>
        </tr>
    </table>
</div>

<div>
    <table border="1" align="center" cellpadding="0" cellspacing="0" id="tab_2">
        <tr>
            <td colspan="3" style="text-align: left" class="bac">经营情况</td>
        </tr>
        <tr>
            <td>总投入(万元)</td>
            <td>总收益(万元)</td>
            <td>总利润(万元)</td>
        </tr>

        <tbody id="tb2">

        </tbody>
    </table>
</div>

<div class="bac" id="tab_3">
    年总资产：<span id="finalMoney"></span>
</div>

<div id="main" style="width: 800px;height:600px;"></div>

</body>

<script>


    function showTabOne() {
        $.ajax({
            "url": "/assetMess/showTableOne",
            "success": function (res) {
                res = eval(res)
                document.querySelector("#tb1").innerHTML += "<tr><td>" + res.addCount + "</td>" +
                    "<td>" + res.addSum + "</td>" +
                    "<td>增加资产</td></tr>" +
                    "<tr><td>" + res.reserveCount + "</td>" +
                    "<td>" + res.reserveSum + "</td>" +
                    "<td>减少资产</td>" +
                    "</tr>"
                document.querySelector("#totalReserve").innerHTML = (Number(res.addSum) - Number(res.reserveSum))
            }
        })
        let number = Number(document.querySelector("#totalReserve").textContent);
    }

    function showTabTwo() {
        $.ajax({
            "url": "/operatingMess/showTableTwo",
            "success": function (res) {
                res = eval(res)
                document.querySelector("#tb2").innerHTML += "<tr><td>" + res.totalOut + "</td>" +
                    "<td>" + res.totalIn + "</td>" +
                    "<td>" + res.totalLose + "</td></tr>"
                let number = Number(document.querySelector("#totalReserve").textContent);
                document.querySelector("#finalMoney").innerHTML = (number + Number(res.totalLose))
                if (res.totalLose < 0) res.totalLose *= -1
                let chartDom = document.getElementById('main');
                let myChart = echarts.init(chartDom);
                let option;
                option = {
                    title: {
                        text: '年总资产分析表(单位/万元)',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['总投资', '总收益', '总利润']
                    },
                    series: [
                        {
                            name: '年总资产',
                            type: 'pie',
                            radius: '85%',
                            center: ['50%', '51%'],
                            data: [
                                {value: res.totalOut, name: '总投资'},
                                {value: res.totalIn, name: '总收益'},
                                {value: res.totalLose, name: '总利润'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                let currentIndex = -1;

                setInterval(function () {
                    var dataLen = option.series[0].data.length;
                    // 取消之前高亮的图形
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: currentIndex
                    });
                    currentIndex = (currentIndex + 1) % dataLen;
                    // 高亮当前图形
                    myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: currentIndex
                    });
                    // 显示 tooltip
                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: currentIndex
                    });
                }, 1000);

                option && myChart.setOption(option);
            }
        })
    }
</script>
</html>